<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: whitesmoke">
    <div style="width: 100%;height: 55px;background: white;display: flex" @click="fanhui">
      <div style="font-family: 'Avenir';font-size: 20px;margin: 15px 0 0 0px;width: 10%"><van-icon name="arrow-left" /></div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 0px;width: 80%">{{$t('main.NewMessageNotification')}}</div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 15px 0 0 0px;width: 10%"></div>
    </div>
    <div style="margin-top: 5px;color: darkgray;font-size: 15px;display: flex;margin-left: 10px">{{$t('main.NotificationSwitch')}}</div>
<!--    接受新消息的通知-->
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 10px" >
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 83%;display: flex" >{{$t('main.ReceiveNotificationsForNewMessages')}}</div>
      <div style="font-family: 'Avenir';font-size: 10px;margin: 15.5px 0 0 0px;color: darkgray">
        <van-switch v-model="checked1" @change="open1" class="switch1" />
      </div>
    </div>
    <div style="margin-top: 5px;color: darkgray;font-size: 15px;display: flex;margin-left: 10px" >{{$t('main.MessageMode')}}</div>
<!--    系统消息-->
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 10px" >
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 83%;display: flex" >{{$t('main.SystemMessages')}}</div>
      <div style="font-family: 'Avenir';font-size: 10px;margin: 15.5px 0 0 0px;color: darkgray">
        <van-switch v-model="checked2" @change="open2"  class="switch1" />
      </div>
    </div>
<!--    派件消息-->
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 1px" >
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 83%;display: flex" >{{$t('main.DispatchMessage')}}</div>
      <div style="font-family: 'Avenir';font-size: 10px;margin: 15.5px 0 0 0px;color: darkgray">
        <van-switch v-model="checked3" @change="open3"  class="switch1" />
      </div>
    </div>
<!--    揽件消息-->
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 1px" >
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 83%;display: flex" >{{$t('main.PickupMessage')}}</div>
      <div style="font-family: 'Avenir';font-size: 10px;margin: 15.5px 0 0 0px;color: darkgray">
        <van-switch v-model="checked4" @change="open4"  class="switch1" />
      </div>
    </div>
<!--    活动通知-->
    <div style="width: 100%;height: 55px;background: white;display: flex;margin-top: 1px" >
      <div style="font-family: 'Avenir';font-size: 16px;margin: 15.5px 0 0 15px;width: 83%;display: flex" >{{$t('main.EventNotifications')}}</div>
      <div style="font-family: 'Avenir';font-size: 10px;margin: 15.5px 0 0 0px;color: darkgray">
        <van-switch v-model="checked5" @change="open5"  class="switch1" />
      </div>
    </div>
  </div>
</template>

<script>
import {selectAll,messagesUpdate} from "@/api/SetUp/messages/messages"

export default {
  data() {
    return {
      checked1:null,
      checked2:null,
      checked3:null,
      checked4:null,
      checked5:null,
      messagesList:{},
      user:JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.selectAll()
  },
  methods: {
    open1(){
      if(this.checked1){
        messagesUpdate(1,1).then(row => {
          this.selectAll()
        })
      }else{
        messagesUpdate(1,2).then(row => {
          this.selectAll()
        })
      }
    },
    open2(){
      if(this.checked2){
        messagesUpdate(2,1).then(row => {
          this.selectAll()
        })
      }else{
        messagesUpdate(2,2).then(row => {
          this.selectAll()
        })
      }
    },
    open3(){
      if(this.checked3){
        messagesUpdate(3,1).then(row => {
          this.selectAll()
        })
      }else{
        messagesUpdate(3,2).then(row => {
          this.selectAll()
        })
      }
    },
    open4(){
      if(this.checked4){
        messagesUpdate(4,1).then(row => {
          this.selectAll()
        })
      }else{
        messagesUpdate(4,2).then(row => {
          this.selectAll()
        })
      }
    },
    open5(){
      if(this.checked5){
        messagesUpdate(5,1).then(row => {
          this.selectAll()
        })
      }else{
        messagesUpdate(5,2).then(row => {
          this.selectAll()
        })
      }
    },
    selectAll(){
      selectAll().then(row => {
        this.messagesList=row.data.data
        console.log(this.messagesList)
        for(var i=0;i<this.messagesList.length;i++){
          if(this.messagesList[i].id==1){
            if(this.messagesList[i].status==1){
              this.checked1=true
            }else{
              this.checked1=false
            }
          }
          if(this.messagesList[i].id==2){
            if(this.messagesList[i].status==1){
              this.checked2=true
            }else{
              this.checked2=false
            }
          }
          if(this.messagesList[i].id==3){
            if(this.messagesList[i].status==1){
              this.checked3=true
            }else{
              this.checked3=false
            }
          }
          if(this.messagesList[i].id==4){
            if(this.messagesList[i].status==1){
              this.checked4=true
            }else{
              this.checked4=false
            }
          }
          if(this.messagesList[i].id==5){
            if(this.messagesList[i].status==1){
              this.checked5=true
            }else{
              this.checked5=false
            }
          }



        }
    })
    },
    fanhui() {
      this.$router.push('/setUp')
    },
  }
}

</script>

<style scoped>
.switch1 {
font-size:23px;
}
</style>
